<template>
  <el-cascader
    :options="area_option"
    :props="props"
    separator=""
    :placeholder="getDefaultArr"
    get-checked-nodes="true"
    @change="handleChange"
  >
    <template slot-scope="{ data }">
      <span>{{ data.name }}</span>
      <!-- <span v-if="!node.isLeaf"> ({{ data.list.length }}) </span> -->
    </template>
  </el-cascader>
</template>

<script>
import { regionList } from '@/api'
export default {
  name: 'DhArea',
  props: {
    // 值
    province: {
      type: String,
      default: ''
    },
    provinceCode: {
      type: String,
      default: ''
    },
    city: {
      type: String,
      default: ''
    },
    cityCode: {
      type: String,
      default: ''
    },
    area: {
      type: String,
      default: ''
    },
    areaCode: {
      type: String,
      default: ''
    },
    // 展开触发方式
    expandTrigger: {
      type: String,
      default: 'hover'
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    // 大小
    size: {
      type: String,
      default: 'medium'
    }
  },
  data() {
    return {
      area_option: [],
      isShow: false
    }
  },
  computed: {
    props() {
      return {
        label: 'name',
        value: 'code',
        children: 'list',
        checkStrictly: this.checkStrictly,
        expandTrigger: this.expandTrigger // 展开触发方式
      }
    },
    getDefaultArr() {
      const addr = this.province + this.city + this.area
      return addr || this.$t('message.qxz') + this.$t('message.ssq')
    },
    getAreaText() {
      let area = ''
      if (this.province) {
        area += this.province
      }
      if (this.city) {
        area += '-' + this.city
      }
      if (this.area) {
        area += '-' + this.area
      }
      return area || this.$t('message.ssq')
    },
    areavalue() {
      return [this.province + '-' + this.provinceCode, this.city + '-' + this.cityCode, this.area + '-' + this.areaCode]
    },
    getSize() {
      switch (this.size) {
        case 'small': return 32
        case 'mini': return 28
        case 'medium': return 36
      }
      return 40
    }
  },
  created() {
    // console.log(area)
    this.getRegionList()
  },
  methods: {
    handleChange(e) {
      console.log(e)
      const result = e.map(v => {
        console.log(v.split('-')[0], v.split('-')[1])
        return { label: v.split('-')[0], value: v.split('-')[1] }
      })
      this.$emit('change', result)
      this.isShow = false
    },
    // 清除选中
    handleClear() {
      this.$emit('change', [])
    },
    getRegionList() {
      regionList({ param: {}}).then(res => {
        console.log(res)
        const addrList = res.recordList
        for (const addr of addrList) {
          addr.code = addr.code + '-' + addr.name
          const cityaddr = addr.list
          if (cityaddr && cityaddr.length) {
            for (const city of cityaddr) {
              city.code = city.code + '-' + city.name
              const arealist = city.list
              if (arealist && arealist.length) {
                for (const area of arealist) {
                  area.code = area.code + '-' + area.name
                }
              }
            }
          }
        }
        this.area_option = addrList
        console.log(addrList)
      }).catch(er => {
        console.log(er)
      })
    }
  }
}
</script>
<style lang="scss">
.my-popper {
  padding: 0!important;
}

</style>
<style lang="scss" scoped>
// 外面文本框
.select-label {
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 14px;
  cursor: pointer;
  color: #606266;
  justify-content: space-between;
  border: 1px solid #DCDFE6;
  background-color: #FFFFFF;

  &:focus {
    outline: none;
    border-color: #3784DC;
  }

  // &:hover {
  //   background-color: #f5f5f5;
  // }

  .left {
    display: flex;
  }
  .label {
    width: 100%;
    min-width: 20px;
    color: #333333;
    margin: 0 10px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .icon {
    display: flex;
    width: 14px;
    height: 100%;
    align-items: center;
    color: #C0C4CC;
  }
}
.select-label-bg {
  background-color: #f5f5f5;
}
// 选择区
.select-option {
  font-size: 14px;

  // 信息区
  .option-top {
    display: flex;
    color: #999999;
    padding: 6px 12px;
    height: 30px;
    font-size: 12px;
    align-items: center;

    .top-line {
      height: 14px;
      border-left: 1px solid #cccccc;
      margin: 0 6px;
    }
    .top-clear {
      color: #00CC88;
      cursor: pointer;
    }
  }
}

@keyframes dialog-fade {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
</style>

